<template>
  <div class="main">
    <div class="mainTop">
		<div class="left">
			<img src="../assets/images/icon_xiaoxi@2x.png" />
    	</div>
    	<div class="count">
    		<img src="../assets/images/img_touxiang@2x.png" />
    	</div>
    	<div class="right">
    		<img src="../assets/images/icon_setting@2x.png" />
    	</div>
    </div>
    <div class="mainIcon">
    	<ul>
			<router-link tag="li" class="subMainIcon" :to="'/mainList/'+ iconItem.Url" v-for="(iconItem,index) in mainData.iconImage" :key='index'>
				<img :src="iconItem.images" class="icon01">
				<p>{{iconItem.iconFont}}</p>
			</router-link>    			
    	</ul>
    </div>
    <div class="bti">
    	<span class="bti01">{{mainData.yijiaFont.maxFont}}</span>
    	<p class="bti02">{{mainData.yijiaFont.minFont}}</p>
    </div>
    <div class="mainIcon">
    	<ul>
			<router-link tag="li" class="subMainIcon02" :to="'/mainList/'+ iconItem.Url" v-for="(iconItem,index) in mainData.guanjia" :key='index'>
				<img :src="iconItem.images" class="icon01">
				<p >{{iconItem.iconFont}}</p>
			</router-link>    			
    	</ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mine',
  data(){
    return {
    	mainData:{
    		iconImage:[
	    		{
	    			images:require("../assets/images/icon_youhuiquan@2x.png"),
	    			iconFont:"优惠券",
	    			Url:"coupon"
	    		},
	    		{
	    			images:require("../assets/images/icon_shoucang@2x.png"),
	    			iconFont:"收藏",
	    			Url:"collect"
	    		},
	    		{
	    			images:require("../assets/images/icon_yuekan@2x.png"),
	    			iconFont:"约看",
	    			Url:"see"
	    		},
	    		{
	    			images:require("../assets/images/icon_dingfdan@2x.png"),
	    			iconFont:"订单",
	    			Url:"order"
	    		},
	    		{
	    			images:require("../assets/images/icon_sirenzhuli@2x.png"),
	    			iconFont:"私人助理",
	    			Url:"aid"
	    		},
	    		{
	    			images:require("../assets/images/icon_weiliao@2x.png"),
	    			iconFont:"微聊",
	    			Url:"chat"
	    		},
	    		{
	    			images:require("../assets/images/icon_pingjia@2x.png"),
	    			iconFont:"评价",
	    			Url:"evaluate"
	    		},
	    		{
	    			images:require("../assets/images/icon_tousu@2x.png"),
	    			iconFont:"投诉建议",
	    			Url:"complain"
	    		}  		   		
	    	],
	    	guanjia:[
	    		{
	    			images:require("../assets/images/icon_hetong@2x.png"),
	    			iconFont:"我的合同",
	    			Url:"contract"
	    		},
	    		{
	    			images:require("../assets/images/icon_zhuanzu@2x.png"),
	    			iconFont:"转租",
	    			Url:"sublet"
	    		},
	    		{
	    			images:require("../assets/images/icon_tuizu@2x.png"),
	    			iconFont:"退租",
	    			Url:"surrender"
	    		},
	    		{
	    			images:require("../assets/images/icon_zhimaxinyong@2x.png"),
	    			iconFont:"芝麻信用",
	    			Url:"credit"
	    		},
	    		{
	    			images:require("../assets/images/icon_xuzu@2x.png"),
	    			iconFont:"续租",
	    			Url:"relet"
	    		},
	    		{
	    			images:require("../assets/images/icon_zhangdan@2x.png"),
	    			iconFont:"账单",
	    			Url:"bill"
	    		}   		
	    	],
	    	yijiaFont:{
	    		maxFont:"宜居管家",
	    		minFont:"宜居专享服务"
	    	}	    	
    	}
    	
    }
  }
}
</script>
<style lang="css">
/*.main{
    width: 100%;
	.mainTop{
		width: 100%;
		background: #ff5555;
		height: 3.16rem;
		position: relative;
		.left{
			width: 0.42rem;
			// height: 0.42rem;
			position: absolute;
			left: 0.2rem;
			top:0;
			img{
				width: 100%;
			}
		}
		.right{
			width: 0.42rem;
			position: absolute;
			right: 0.2rem;
			top:0;
			// height: 0.42rem;
			img{
				width: 100%;
			}
		}
		.count{
			margin: 0 auto;
			width: 1.44rem;
			padding-top: 0.52rem;
			img{
				width: 100%;
			}
		}
		.mainIcon{
			width: 100%;
			ul{
				width: 100%;
				// display: flex;
				li{
					float: left;
					width: 25%;
					overflow: hidden;
					img{
						width: 20px;
						height: 20px;
						display: block;
						margin: 0 auto;
					}
					p{
						font-size:0.14rem;
					}
				}
			}
		}
		
	}
}*/
.main{
	width: 100%;
	background: #fff;
	overflow: hidden;
}
.mainTop{
	width: 100%;
	background: #ff5555;
	height: 3.16rem;
	position: relative;
	margin-bottom: 0.2rem;
}
.left{
	width: 0.42rem;
	// height: 0.42rem;
	position: absolute;
	left: 0.2rem;
	top:0;
}
.left img{
	width: 100%;
}
.right{
	width: 0.42rem;
	position: absolute;
	right: 0.2rem;
	top:0;
	/*height: 0.42rem;*/
}
.right img{
	width: 100%;
}
.count{
	margin: 0 auto;
	width: 1.44rem;
	padding-top: 0.52rem;
}
.count img{
	width: 100%;
}
.mainIcon{
	width: 94.6%;
	margin:0 auto;
	box-sizing: border-box;
	box-shadow: 0 0 0.08rem #ccc;
	overflow: hidden;
	background: #fff;
	padding-top: 0.28rem;
	border-radius: 0.1rem;
}
.mainIcon ul{
	width: 100%;
}
.mainIcon ul li{
	width: 25%;
	float: left;
}
.icon01{
	width:.88rem;
	height: .88rem;
	display: block;
	margin: 0 auto;
}
p{
	text-align: center;
	font-size: 0.15rem;
	padding: 0.16rem 0 0.62rem 0;
	opacity: 0.8;
}
.mainIcon .subMainIcon02{
	width: 33.3%;
}
.bti{
	width: 94.6%;
	margin: 0 auto;
	padding-left: 0.2rem;
	opacity: 0.8;
	height:1.1rem;
	line-height: 1.1rem;
}
.bti .bti01{
	font-size: 0.3rem;
	line-height: 1.1rem;
	text-indent: 0.2rem;
	width: 1.4rem;
	float: left;
}
.bti .bti02{
	font-size: 0.1rem;
	width: 3rem;
	line-height: .8rem;
}
</style>
